<template>
  <el-dialog
    v-model="state.dialogVisible"
    :append-to-body="true"
    :before-close="close"
    class="dialog-container"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    :modal="model"
    :title="state.dialogTitle"
    :width="width"
  >
    <div class="upload">
      <BaseFileUpload
        ref="fileUploadRef"
        :file-type-code="state.data.fileTypeCode"
        :height="360"
        @success="handleUploadSuccess"
      />
    </div>
    <template #footer>
      <el-form ref="formRef" :model="state.data" :rules="state.formRules">
        <el-row>
          <el-col :span="24">
            <el-form-item label="所属分类:" prop="fileTypeName">
              <el-cascader
                v-model="state.data.fileTypeId"
                clearable
                :collapse-tags="true"
                :options="state.fileTypeOptions"
                placeholder="请选择所属分类"
                :props="state.cascaderProps"
                :show-all-levels="false"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="position: relative; padding-right: 0px; text-align: right">
        <div
          v-show="state.showProgress"
          style="position: absolute; top: 10px; left: 0px; color: #999"
        >
          当前上传成功数:{{ state.imgSuccessNum }} 当前上传失败数:{{
            state.imgErrorNum
          }}
        </div>
        <el-button icon="circle-close" type="warning" @click="close">
          取消
        </el-button>
        <el-button
          icon="upload-filled"
          type="primary"
          :loading="state.loading"
          @click="save"
          >开始上传</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="VabFileUpload">
import _ from "lodash";
import { querySystemTreeNode } from "@/api/admin/system/systemtree/";
import { filterTreeNode } from "@/utils/common";
import BaseFileUpload from "@/components/baseFileUpload.vue";

const props = defineProps({
  limit: {
    type: Number,
    default: 10
  },
  size: {
    type: Number,
    default: 2
  },
  title: {
    type: String,
    default: "上传文件"
  },
  model: {
    type: Boolean,
    default: true
  },
  autoLoad: {
    type: Boolean,
    default: true
  },
  width: {
    type: String,
    default: "60%"
  },
  fileTypeCode: {
    type: String,
    default: ""
  },
  accept: {
    type: Array,
    default: function () {
      return [".pdf"];
    }
  }
});

const emits = defineEmits(["confirm", "success", "remove"]);

const fileUploadRef = ref(null);

const state = reactive({
  showProgress: false,
  loading: false,
  dialogVisible: false,
  typeList: null,
  dialogTitle: props.title,
  acceptOptions: props.accept.join(","),
  fileTypeOptions: [],
  onChange: false,
  imgSuccessNum: 0,
  imgErrorNum: 0,
  data: {
    fileTypeId: "",
    fileTypeName: "",
    fileTypeCode: props.fileTypeCode
  },
  formRules: {
    fileTypeName: [
      { required: true, message: "所属分类不能为空", trigger: "blur" }
    ]
  },
  cascaderProps: {
    multiple: false,
    emitPath: false,
    label: "text",
    value: "id"
  }
});

onMounted(() => {
  queryFileTypeData();
});

const save = () => {
  if (fileUploadRef.value.state.onChange) {
    state.showProgress = true;
    state.loading = true;
    fileUploadRef.value.submitUpload();
  }
};

const queryFileTypeData = async () => {
  const params = {};
  params.treeCode = "filetype";
  await querySystemTreeNode(params).then(res => {
    if (res.code === 200) {
      state.fileTypeOptions = state.fileTypeOptions.concat(res.data);
    }
  });
  if (props.fileTypeCode) {
    const item = filterTreeNode(
      state.fileTypeOptions,
      props.fileTypeCode,
      "nodeCode"
    );
    if (item) {
      state.data.fileTypeId = item.id;
      state.data.fileTypeCode = item.nodeCode;
      state.data.fileTypeName = item.text;
    }
  } else {
    state.data.fileTypeId = state.fileTypeOptions[0].id;
    state.data.fileTypeCode = state.fileTypeOptions[0].nodeCode;
    state.data.fileTypeName = state.fileTypeOptions[0].text;
  }
};

const handleUploadSuccess = () => {
  state.loading = false;
  state.imgSuccessNum = fileUploadRef.value.state.successNum;
  state.imgErrorNum = fileUploadRef.value.state.errorNum;
};

const show = row => {
  state.loading = false;
  state.showProgress = false;
  state.dialogVisible = true;
  nextTick(() => {
    fileUploadRef.value.init(row, false);
    if (props.autoLoad) {
      fileUploadRef.value.load();
    }
  });
};

const close = () => {
  state.dialogVisible = false;
  emits("confirm", state.fileList);
};

defineExpose({
  fileUploadRef,
  close,
  save,
  show
});
</script>

<style lang="scss" scoped>
.dialog-container {
  min-height: 360px !important;
  max-height: 520px !important;
  overflow: auto;
}

.upload {
  height: 360px;
  max-height: 400px;
  padding: 0px;
  overflow: auto;
  border: 0px solid red;

  .upload-content {
    .el-upload__tip {
      display: block;
      height: 30px;
      line-height: 30px;
    }
  }
}
</style>
